POC Monkey-patch history pushState and replaceState to listen to location changes #455
Conversation
zanderle
force-pushed
the
zanderle/157-listen-on-pushState-and-replaceState-changes
branch
from
68a5305 to
2f3f8f0
Compare
|
@humitos this just does the monkey-patching for now (haven't added any listeners yet). Do we want to do a test-build with this, to see if it correctly picks up the "page changes", before we move on to the next step? |
zanderle
force-pushed
the
zanderle/157-listen-on-pushState-and-replaceState-changes
branch
from
2f3f8f0 to
7aee62e
Compare
src/utils.js
Outdated
| const originalMethod = history[methodName]; | ||
| history[methodName] = function () { | ||
| const result = originalMethod.apply(this, arguments); | ||
| const event = new Event(methodName); |
There was a problem hiding this comment.
Here is where I think we should create new Event(READTHEDOCS_URL_CHANGED) or similar.
How hard would it be to create a simple example for this using the I tested using |
I think I can make it work locally, to develop, and then I'll ask you to do a proper test on your setup |
I added this to the PR, but we can remove it, if you think it's redundant |
There was a problem hiding this comment.
Looks good.
This is the first step required for the underlying work. Here, we are detecting that the URL has changed and triggering a custom event, which is 💯
The next step here is to subscribe and use this event to reload all the addons that require reloading. My idea is to investigate the usage of Lit context and make the config object to become an object shared by that context.
With that, we can subscribe to this event, re-fetch the updated data from the endpoint and update the config object so the addons refresh automatically.
I wasn't able to jump into exploring this idea yet, but I should probably do it soon.
| @@ -24,6 +24,8 @@ export const IS_TESTING = | |||
| export const IS_PRODUCTION = | |||
| typeof WEBPACK_IS_PRODUCTION === "undefined" ? false : WEBPACK_IS_PRODUCTION; | |||
|
|
|||
| export const READTHEDOCS_URL_CHANGED_EVENT = "readthedocsUrlChanged"; | |||
There was a problem hiding this comment.
| export const READTHEDOCS_URL_CHANGED_EVENT = "readthedocsUrlChanged"; | |
| export const READTHEDOCS_URL_CHANGED_EVENT = "readthedocs-url-changed"; |
We are using readthedocs-addons-data-ready or similar for another event we are triggering.
There was a problem hiding this comment.
Oh, by the way, this event should be defined in events.js file.
| history.pushState({}, "", `#url-${randomHash}`); | ||
| }); | ||
|
|
||
| window.addEventListener("readthedocsUrlChanged", (ev) => {console.log("URL Change detected!", ev)}); |
Closes #157